<script setup lang="ts">
	import {computed, ref} from 'vue';
	import useSparePartApplyDetail from './services/useSparePartApplyDetail';
	import {onLoad} from '@dcloudio/uni-app';

	const {sparePartAPplyDetail, getSparePartApplyDetail} =
		useSparePartApplyDetail();

	defineOptions({
		name: 'SparePartApplyDetailPage',
	});

	const sparePartAPplyId = ref('');

	const pageStyle = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		return {
			height: `${systemInfo.windowHeight - systemInfo.safeAreaInsets.bottom}px`,
			width: `${systemInfo.windowWidth}px`,
		};
	});

	const orderAmount = computed(() => {
		let result = 0;

		sparePartAPplyDetail.value.materialApplyVoList.forEach((item) => {
			result += item.price * item.qty;
		});

		return `￥${result.toFixed(2)}`;
	});
	
	const handleOrderNoCopyClick = (content: string) => {
		uni.setClipboardData({
			data: content,
			success() {
				uni.showToast({
					title: '已复制',
					icon: 'success',
				});
			},
		});
	}

	const init = async () => {
		await getSparePartApplyDetail(sparePartAPplyId.value);
	};

	onLoad((e) => {
		if (e.id) {
			sparePartAPplyId.value = e.id;
			if (e.id) {
				init();
			}
		}
	});
</script>

<template>
	<view class="spare-part-apply-detail-page" :style="pageStyle">
		<view class="base-info">
			<view class="title">单据信息</view>
			<view class="info">
				<view class="info-item">
					<view class="label">单据编号:</view>
					<view class="value">{{ sparePartAPplyDetail.code }}</view>
					<image
						@click.stop="handleOrderNoCopyClick(sparePartAPplyDetail.code)"
						style="width: 30rpx; height: 30rpx"
						src="/static/copy.svg"
						mode="aspectFit"
					></image>
				</view>
				<view class="info-item">
					<view class="label">单据状态:</view>
					<view class="value">
						<view
							class="status-primary"
							v-if="sparePartAPplyDetail.status === 1"
						>
							待提交
						</view>
						<view
							class="status-warning"
							v-if="sparePartAPplyDetail.status === 2"
						>
							待审核
						</view>
						<view
							class="status-warning"
							v-if="sparePartAPplyDetail.status === 3"
						>
							待过账
						</view>
						<view class="status-error" v-if="sparePartAPplyDetail.status === 4">
							审核驳回
						</view>
						<view class="status-primary" v-if="sparePartAPplyDetail.status === 5">
							已过账
						</view>
						<view class="status-warning" v-if="sparePartAPplyDetail.status === 6">
							待审批
						</view>
					</view>
				</view>
				<view class="info-item">
					<view class="label">单据金额:</view>
					<view class="value amount">{{ orderAmount }}</view>
				</view>
				<view class="info-item">
					<view class="label">收货人员:</view>
					<view class="value">{{ sparePartAPplyDetail.contactName }}</view>
				</view>
				<view class="info-item">
					<view class="label">联系手机:</view>
					<view class="value">{{ sparePartAPplyDetail.contactPhone }}</view>
				</view>
				<view class="info-item">
					<view class="label">收货地址:</view>
					<view class="value">
						<text>{{ sparePartAPplyDetail.province }}</text>
						<text>{{ sparePartAPplyDetail.city }}</text>
						<text>{{ sparePartAPplyDetail.area }}</text>
						<text>{{ sparePartAPplyDetail.town }}</text>
						<text>{{ sparePartAPplyDetail.detailAddress }}</text>
					</view>
				</view>
				<view class="info-item">
					<view class="label">创建人员:</view>
					<view class="value">{{ sparePartAPplyDetail.creator }}</view>
				</view>
				<view class="info-item">
					<view class="label">创建时间:</view>
					<view class="value">{{ sparePartAPplyDetail.createTime }}</view>
				</view>
				<view class="info-item">
					<view class="label">更新时间:</view>
					<view class="value">{{ sparePartAPplyDetail.updateTime }}</view>
				</view>
			</view>
		</view>
		
		<view class="spare-part-list">
			<view class="title">配件列表</view>
			<view class="spare-part" v-for="(sparePart, sparePartIndex) in sparePartAPplyDetail.materialApplyVoList" :key="sparePartIndex">
				<view class="info-item">
					<view class="info-item-label">配件名称:</view>
					<view class="info-item-value">{{ sparePart.spareName }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label">配件编号:</view>
					<view class="info-item-value">{{ sparePart.spareCode }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label">配件规格:</view>
					<view class="info-item-value">{{ sparePart.specName }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label">配件单位:</view>
					<view class="info-item-value">{{ sparePart.spareUnit }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label">申请数量:</view>
					<view class="info-item-value">{{ sparePart.qty }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label">配件单价:</view>
					<view class="info-item-value amount">￥{{ (sparePart.price || 0).toFixed(2) }}</view>
				</view>
				<view class="info-item">
					<view class="info-item-label">总金额:</view>
					<view class="info-item-value amount">￥{{ (sparePart.qty * (sparePart.price || 0)).toFixed(2) }}</view>
				</view>
				<view class="divider" v-if="sparePartIndex !== sparePartAPplyDetail.materialApplyVoList.length - 1"></view>
			</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.spare-part-apply-detail-page {
		display: flex;
		flex-direction: column;
		row-gap: 24rpx;
		box-sizing: border-box;
		padding: 24rpx;
		overflow: auto;
		font-size: 24rpx;

		.base-info {
			background-color: #fff;
			padding: 24rpx;
			box-sizing: border-box;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
			border-radius: 4rpx;

			.title {
				font-weight: bold;
			}

			.info {
				display: flex;
				flex-direction: column;
				row-gap: 8rpx;
				margin-top: 8rpx;

				.info-item {
					display: flex;
					column-gap: 12rpx;

					.label {
						color: #606266;
					}

					.value {
						.status-primary {
							color: #007cff;
							font-weight: bold;
						}

						.status-warning {
							color: #e69103;
							font-weight: bold;
						}

						.status-success {
							color: #00c0c0;
							font-weight: bold;
						}

						.status-error {
							color: #f56c6c;
							font-weight: bold;
						}
					}

					.amount {
						font-weight: bold;
						color: #007cff;
					}
				}
			}
		}
		
		.spare-part-list {
			flex: 1;
			height: 0;
			background-color: #fff;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
			border-radius: 4rpx;
			box-sizing: border-box;
			padding: 24rpx;
			display: flex;
			flex-direction: column;
			row-gap: 12rpx;
			overflow: auto;
			
			.title {
				font-weight: bold;
			}
			
			.spare-part {
				display: flex;
				flex-direction: column;
				row-gap: 12rpx;
				
				.info-item {
					display: flex;
					column-gap: 12rpx;
					
					.info-item-label {
						color: #606266;
						white-space: nowrap;
					}
					
					.amount {
						color: #007cff;
						font-weight: bold;
					}
				}
				
				.divider {
					height: 2rpx;
					background-color: rgba(0, 0, 0, 0.1);
				}
			}
		}
	}
</style>
